﻿ <!DOCTYPE html>
<html>
<head>
<style>
* {
  -webkit-user-select: none;
  -user-select: none;
  -webkit-user-drag: none;
  -user-drag: none;
}

@font-face {
  font-family: 'Custom_Font';
  src: local('.SFNSText-Light'), 
       local('.HelveticaNeueDeskInterface-Light'), 
       local('.LucidaGrandeUI'), 
       local('Ubuntu Light'), 
       local('Segoe UI Light'),
       local('Roboto-Light'), 
       local('DroidSans'), 
       local('Tahoma');
}

* {
  margin: 0;
  padding: 0;
}

html, body {
  width: 350px;
  background-color: #F3F3F3;
  font-family: Custom_Font!important;
  font-size: 1em;
  overflow: hidden;
}

hr {
  border: 0;
  border-top: solid lightgray 1px;
}

div {
  padding: 4px 8px;
}

div.btn {
  text-decoration: none;
  outline: none;
  border: 0;
  font-size: inherit;
  cursor: pointer;
}

div.btn:hover {
  color: #ffffff;
  background: #3cb0fd;
  background-image: -webkit-linear-gradient(top, #3cb0fd, #3498db);
  background-image: -moz-linear-gradient(top, #3cb0fd, #3498db);
  background-image: -ms-linear-gradient(top, #3cb0fd, #3498db);
  background-image: -o-linear-gradient(top, #3cb0fd, #3498db);
  background-image: linear-gradient(to bottom, #3cb0fd, #3498db);
  text-decoration: none;
}

a {
  outline: none;
  text-decoration: none;
  color: #0C97BB;
}

div.btn img {
  height: 32px;
}

section {
  margin-right: 15px;
  text-align: right;
  width: 24px;
  display: inline-block;
  vertical-align: middle;
}
</style>
<title>RecordRTC Extension</title>
</head>
<body>
    <article id="default-section">
      <div class="btn" id="full-screen">
          <section><img src="images/main-icon.png"></section>
          Screen Only (without audio)
      </div>
      <hr>
      <div class="btn" id="microphone-screen">
          <section><img src="images/main-icon.png"></section>
          Screen + Microphone
      </div>
      <hr>
      <div class="btn" id="full-screen-audio">
          <section><img src="images/main-icon.png"></section>
          Screen + Speakers
      </div>
      <hr>
      <div class="btn" id="full-screen-microphone-audio">
          <section><img src="images/main-icon.png"></section>
          Screen + Microphone + Speakers
      </div>
      <hr>
      <div class="btn" id="selected-tab">
          <section><img src="images/main-icon.png"></section>
          Chrome Tab
      </div>
      <hr>
      <div class="btn" id="selected-tab-audio-only">
          <section><img src="images/main-icon.png"></section>
          Chrome Tab (Audio Only)
      </div>
      <hr>
      <div class="btn" id="microphone-screen-camera">
          <section><img src="images/main-icon.png"></section>
          Full Screen + Camera
      </div>
      <hr>
      <div class="btn" id="microphone-webcam">
          <section><img src="images/main-icon.png"></section>
           Microphone + Camera
      </div>
      <hr>
      <div class="btn" id="microphone-speakers">
          <section><img src="images/main-icon.png"></section>
           Microphone + Speakers
      </div>
      <hr>
      <div class="btn" id="microphone-only">
          <section><img src="images/main-icon.png"></section>
           Microphone Only
      </div>
      <hr>
      <div class="btn" id="speakers-only">
          <section><img src="images/main-icon.png"></section>
           Speakers Only
      </div>
      <hr>
      <div style="float: right;">
        <a href="preview.html" target="_blank">See All Recordings</a>
      </div>
      <div>
        <a id="btn-options" href="options.html" target="_blank">Options</a>
      </div>
    </article>

    <article id="stop-section">
      <div class="btn" id="stop-recording">
          <section><img src="images/recordRTC-progress-1.png"></section>
          Stop Recording
      </div>
    </article>

    <script src="dropdown.js"></script>
</body>
</html>
